<template>
  <view
    class="draggable-button"
    :style="{top: buttonTop + 'px', left: buttonLeft + 'px'}"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
		<image
		  src="@/static/icon/kefu.png"
		  style="width: 35px; height: 35px;"
			@click="openService"
		></image>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      buttonTop: 600, // 初始位置的top值
      buttonLeft: 320, // 初始位置的left值
      startX: 0, // 触摸开始的X坐标
      startY: 0, // 触摸开始的Y坐标
      isDragging: false, // 是否正在拖拽
    };
  },
  methods: {
    handleTouchMove(event) {
      if (this.isDragging) {
        const touch = event.touches[0];
        const deltaX = touch.clientX - this.startX;
        const deltaY = touch.clientY - this.startY;
        this.buttonTop += deltaY;
        this.buttonLeft += deltaX;
        this.startX = touch.clientX;
        this.startY = touch.clientY;
      }
    },
    handleTouchEnd() {
      this.isDragging = false;
    },
    openService() {
      // 打开客服通道的逻辑，可以是网页链接、APP内部页面或者调用接口等
      console.log('Open service here');
    },
  },
};
</script>
 
<style>
.draggable-button {
	display: flex;
	align-items: center;
	justify-content: center;
			
  position: fixed;
  z-index: 999;
  user-select: none;
	height: 60px;
	width: 60px;
	border-radius: 60px;
	background: #027019;
}
</style>